<template>
  <div class="pm-base-editor">
    <h1>{{ title }}</h1>
    <div ref="editorRoot" class="pm-base-editor">
        <div id="editor"></div>
        <div id="content"></div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { initEditor } from './editor/PmBaseEditor'

const title = ref('基于 prosemirror 的 demo')


onMounted(() => {
    console.log('pm-base-editor mounted')
    const editor = initEditor('#editor', '#content')
})

onBeforeUnmount(() => {
 
})
</script>

<style scoped lang="scss">
@import './editor/editorDemo.css';
.pm-base-editor {
  padding: 24px;

  h1 {
    margin-bottom: 16px;
  }
}

</style>
